import 'package:flutter/material.dart';
import '../constants/app_theme.dart';

/// 强度滑块组件
/// 用于选择情绪强度
class IntensitySlider extends StatefulWidget {
  /// 当前值
  final int value;
  
  /// 值变化回调
  final Function(int) onChanged;
  
  /// 最小值
  final int min;
  
  /// 最大值
  final int max;
  
  /// 主题颜色
  final Color? color;
  
  /// 是否显示标签
  final bool showLabels;
  
  /// 是否显示数值
  final bool showValue;
  
  /// 是否启用触觉反馈
  final bool enableHapticFeedback;

  const IntensitySlider({
    super.key,
    required this.value,
    required this.onChanged,
    this.min = 1,
    this.max = 10,
    this.color,
    this.showLabels = true,
    this.showValue = true,
    this.enableHapticFeedback = true,
  });

  @override
  State<IntensitySlider> createState() => _IntensitySliderState();
}

class _IntensitySliderState extends State<IntensitySlider>
    with TickerProviderStateMixin {
  late AnimationController _scaleController;
  late Animation<double> _scaleAnimation;
  
  @override
  void initState() {
    super.initState();
    _initializeAnimations();
  }

  @override
  void dispose() {
    _scaleController.dispose();
    super.dispose();
  }

  /// 初始化动画
  void _initializeAnimations() {
    _scaleController = AnimationController(
      duration: const Duration(milliseconds: 150),
      vsync: this,
    );
    
    _scaleAnimation = Tween<double>(
      begin: 1.0,
      end: 1.1,
    ).animate(CurvedAnimation(
      parent: _scaleController,
      curve: Curves.easeInOut,
    ));
  }

  /// 处理值变化
  void _handleValueChanged(double value) {
    final intValue = value.round();
    if (intValue != widget.value) {
      if (widget.enableHapticFeedback) {
        // 触觉反馈
        // HapticFeedback.selectionClick();
      }
      
      // 播放缩放动画
      _scaleController.forward().then((_) {
        _scaleController.reverse();
      });
      
      widget.onChanged(intValue);
    }
  }

  /// 获取强度描述
  String _getIntensityDescription(int value) {
    if (value <= 2) return '很轻微';
    if (value <= 4) return '轻微';
    if (value <= 6) return '中等';
    if (value <= 8) return '强烈';
    return '非常强烈';
  }

  /// 获取强度颜色
  Color _getIntensityColor(int value) {
    final baseColor = widget.color ?? AppTheme.primaryColor;
    final opacity = (value / widget.max).clamp(0.3, 1.0);
    return baseColor.withOpacity(opacity);
  }

  @override
  Widget build(BuildContext context) {
    final themeColor = widget.color ?? AppTheme.primaryColor;
    
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 当前值显示
        if (widget.showValue)
          _buildValueDisplay(themeColor),
        
        const SizedBox(height: 16),
        
        // 滑块
        _buildSlider(themeColor),
        
        const SizedBox(height: 8),
        
        // 标签
        if (widget.showLabels)
          _buildLabels(),
      ],
    );
  }

  /// 构建值显示
  Widget _buildValueDisplay(Color themeColor) {
    return AnimatedBuilder(
      animation: _scaleAnimation,
      builder: (context, child) {
        return Transform.scale(
          scale: _scaleAnimation.value,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '强度：${widget.value}',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: _getIntensityColor(widget.value),
                    ),
                  ),
                  const SizedBox(height: 2),
                  Text(
                    _getIntensityDescription(widget.value),
                    style: TextStyle(
                      fontSize: 12,
                      color: AppTheme.textSecondaryColor,
                    ),
                  ),
                ],
              ),
              
              // 强度指示器
              _buildIntensityIndicator(themeColor),
            ],
          ),
        );
      },
    );
  }

  /// 构建强度指示器
  Widget _buildIntensityIndicator(Color themeColor) {
    return Container(
      width: 60,
      height: 8,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        color: AppTheme.dividerColor,
      ),
      child: FractionallySizedBox(
        alignment: Alignment.centerLeft,
        widthFactor: widget.value / widget.max,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
            gradient: LinearGradient(
              colors: [
                themeColor.withOpacity(0.6),
                _getIntensityColor(widget.value),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 构建滑块
  Widget _buildSlider(Color themeColor) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        activeTrackColor: _getIntensityColor(widget.value),
        inactiveTrackColor: AppTheme.dividerColor,
        thumbColor: _getIntensityColor(widget.value),
        overlayColor: _getIntensityColor(widget.value).withOpacity(0.2),
        thumbShape: const RoundSliderThumbShape(
          enabledThumbRadius: 12,
        ),
        overlayShape: const RoundSliderOverlayShape(
          overlayRadius: 20,
        ),
        trackHeight: 6,
        valueIndicatorShape: const PaddleSliderValueIndicatorShape(),
        valueIndicatorColor: _getIntensityColor(widget.value),
        valueIndicatorTextStyle: const TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
      child: Slider(
        value: widget.value.toDouble(),
        min: widget.min.toDouble(),
        max: widget.max.toDouble(),
        divisions: widget.max - widget.min,
        label: widget.value.toString(),
        onChanged: _handleValueChanged,
      ),
    );
  }

  /// 构建标签
  Widget _buildLabels() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          '${widget.min}',
          style: TextStyle(
            fontSize: 12,
            color: AppTheme.textSecondaryColor,
          ),
        ),
        Text(
          '${widget.max}',
          style: TextStyle(
            fontSize: 12,
            color: AppTheme.textSecondaryColor,
          ),
        ),
      ],
    );
  }
}

/// 紧凑强度滑块
/// 用于在较小空间中显示强度选择
class CompactIntensitySlider extends StatelessWidget {
  /// 当前值
  final int value;
  
  /// 值变化回调
  final Function(int) onChanged;
  
  /// 最小值
  final int min;
  
  /// 最大值
  final int max;
  
  /// 主题颜色
  final Color? color;

  const CompactIntensitySlider({
    super.key,
    required this.value,
    required this.onChanged,
    this.min = 1,
    this.max = 10,
    this.color,
  });

  /// 获取强度颜色
  Color _getIntensityColor(int value) {
    final baseColor = color ?? AppTheme.primaryColor;
    final opacity = (value / max).clamp(0.3, 1.0);
    return baseColor.withOpacity(opacity);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text(
          '$min',
          style: TextStyle(
            fontSize: 12,
            color: AppTheme.textSecondaryColor,
          ),
        ),
        
        Expanded(
          child: SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: _getIntensityColor(value),
              inactiveTrackColor: AppTheme.dividerColor,
              thumbColor: _getIntensityColor(value),
              overlayColor: _getIntensityColor(value).withOpacity(0.2),
              thumbShape: const RoundSliderThumbShape(
                enabledThumbRadius: 8,
              ),
              overlayShape: const RoundSliderOverlayShape(
                overlayRadius: 16,
              ),
              trackHeight: 4,
            ),
            child: Slider(
              value: value.toDouble(),
              min: min.toDouble(),
              max: max.toDouble(),
              divisions: max - min,
              onChanged: (newValue) => onChanged(newValue.round()),
            ),
          ),
        ),
        
        Text(
          '$max',
          style: TextStyle(
            fontSize: 12,
            color: AppTheme.textSecondaryColor,
          ),
        ),
        
        const SizedBox(width: 8),
        
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            color: _getIntensityColor(value),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Center(
            child: Text(
              '$value',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 12,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

/// 强度指示器
/// 用于只读显示强度值
class IntensityIndicator extends StatelessWidget {
  /// 强度值
  final int intensity;
  
  /// 最大值
  final int maxIntensity;
  
  /// 主题颜色
  final Color? color;
  
  /// 大小
  final double size;
  
  /// 是否显示数值
  final bool showValue;

  const IntensityIndicator({
    super.key,
    required this.intensity,
    this.maxIntensity = 10,
    this.color,
    this.size = 16,
    this.showValue = true,
  });

  /// 获取强度颜色
  Color _getIntensityColor() {
    final baseColor = color ?? AppTheme.primaryColor;
    final opacity = (intensity / maxIntensity).clamp(0.3, 1.0);
    return baseColor.withOpacity(opacity);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 强度条
        Container(
          width: size * 3,
          height: size * 0.5,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(size * 0.25),
            color: AppTheme.dividerColor,
          ),
          child: FractionallySizedBox(
            alignment: Alignment.centerLeft,
            widthFactor: intensity / maxIntensity,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(size * 0.25),
                color: _getIntensityColor(),
              ),
            ),
          ),
        ),
        
        if (showValue) ...[
          SizedBox(width: size * 0.25),
          Text(
            '$intensity',
            style: TextStyle(
              fontSize: size * 0.75,
              fontWeight: FontWeight.bold,
              color: _getIntensityColor(),
            ),
          ),
        ],
      ],
    );
  }
}